demos.HPIpanel = Ext.extend(Ext.form.TextArea, {
    label: 'HPI',
    idcount: 0,
    severe: false,
    scope: this,
	initComponent: function() {
        Ext.apply(this, {
            labelAlign: 'left',
            labelWidth: '80',
            severe: false,
            listeners: {
            	tap: {
            		element: 'labelEl',
            		fn: function() {
            			var hpi = Ext.getCmp(this.dom.parentElement.id);
            			
            			//console.debug(this);
            			//console.debug(label);
            			//console.debug('You clicked '+this.id+' and my status is ');
            	
            			if (!hpi.severe) {
    	        			hpi.labelEl.removeCls('x-form-label');
    	        			hpi.labelEl.addCls('x-form-label-severe');
            			} else {
    	        			hpi.labelEl.removeCls('x-form-label-severe');
    	        			hpi.labelEl.addCls('x-form-label');            				
            			}
            			hpi.severe = !hpi.severe;

            			hpi.fireEvent('hpichange');
            			//checkbox.isChecked() ? checkbox.uncheck() : checkbox.check();
            		}
            	},
            	change: {
            		element: 'el',
            		fn: function() {
            			var hpi = Ext.getCmp(this.dom.id);
            			
            			hpi.fireEvent('hpichange');            			
            		}
            	}
            }
        });
        
        this.addEvents('hpichange');
        this.enableBubble('hpichange');

	    demos.HPIpanel.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('hpipanel', demos.HPIpanel);
